import styles from './index.module.scss'
import cm from 'classnames'
import Link from 'next/link'
import { useRouter } from 'next/router'
import Button from '../../button'

const navList = [
  { label: '首页', url: '/' },
  { label: '电影', url: '/movie' },
  { label: '电视剧', url: '/drama' },
  { label: '电视直播', url: '/live' },
  { label: '综艺', url: '/variety' },
  { label: '动漫', url: '/animation' },
  { label: '体育', url: '/sports' }
]

const Index = props => {
  const { asPath, pathname, query } = useRouter()
  const { currentUrl } = props
  const currPath = '/' + pathname.split('/')[1]
  const isCurrUrlActive = url => {
    return currentUrl === url || currPath === url || '/' + query.tab === url
  }

  const urlArr = ['/movie', '/drama', '/variety', '/animation', '/live', '/sports']
  const itemClass = item =>
    cm(styles.li, {
      [styles.liActive]: isCurrUrlActive(item.url)
    })

  return (
    <>
      <nav className={cm(styles.nav, styles.navPhone)}>
        {navList.slice(0, 4).map((item, index) => {
          return (
            <Link href={item.url} key={index} className={itemClass(item, index)} onClick={() => sessionStorage.clear()}>
              {urlArr.includes(asPath) && isCurrUrlActive(item.url) ? <h1>{item.label}</h1> : <p>{item.label}</p>}
            </Link>
          )
        })}
        <div className={styles.liMore}>
          <span>更多</span>
          <ul className={styles.moreUl}>
            {navList.slice(2, navList.length).map((item, index) => {
              return (
                <Button
                  link
                  href={item.url}
                  key={index}
                  className={cm(styles.liItem, isCurrUrlActive(item.url) ? styles.liItemActive : '')}
                >
                  {item.label}
                </Button>
              )
            })}
          </ul>
        </div>
      </nav>
    </>
  )
}

export default Index
